// 主界面模块
const MainView = {
  // 渲染主界面
  render: function(ctx, width, height, highScore) {
    // 绘制背景
    ctx.fillStyle = '#EFF3F6';
    ctx.fillRect(0, 0, width, height);
    
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    
    // 绘制Logo区域 - 使用比例设置
    const logoSize = 120 * scaleFactor;
    const logoX = (width - logoSize) / 2;
    const logoY = 120 * scaleFactor;
    
    // 绘制圆形背景
    ctx.beginPath();
    ctx.arc(width / 2, logoY + logoSize / 2, logoSize / 2, 0, 2 * Math.PI);
    ctx.fillStyle = '#4A90E2';
    ctx.fill();
    
    // 绘制Logo文字 - 使用比例设置字体大小
    ctx.fillStyle = 'white';
    ctx.font = `bold ${24 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('极速', width / 2, logoY + logoSize / 2 + 10 * scaleFactor);
    
    // 绘制游戏标题 - 使用比例设置字体大小
    ctx.fillStyle = '#2C3E50';
    ctx.font = `bold ${26 * scaleFactor}px Arial`;
    ctx.fillText('极速闪避', width / 2, logoY + logoSize + 30 * scaleFactor);
    
    // 绘制侧边栏礼包图标（限定福利）
    this.renderSidebarGift(ctx, width, height);
    
    // 绘制历史最高分 - 使用比例设置
    const scoreBgWidth = 160 * scaleFactor;
    const scoreBgHeight = 40 * scaleFactor;
    const scoreBgX = (width - scoreBgWidth) / 2;
    const scoreBgY = logoY + logoSize + 60 * scaleFactor;
    
    // 绘制圆角矩形背景 - 使用比例设置圆角
    ctx.beginPath();
    const borderRadius = 20 * scaleFactor;
    ctx.moveTo(scoreBgX + borderRadius, scoreBgY);
    ctx.lineTo(scoreBgX + scoreBgWidth - borderRadius, scoreBgY);
    ctx.quadraticCurveTo(scoreBgX + scoreBgWidth, scoreBgY, scoreBgX + scoreBgWidth, scoreBgY + borderRadius);
    ctx.lineTo(scoreBgX + scoreBgWidth, scoreBgY + scoreBgHeight - borderRadius);
    ctx.quadraticCurveTo(scoreBgX + scoreBgWidth, scoreBgY + scoreBgHeight, scoreBgX + scoreBgWidth - borderRadius, scoreBgY + scoreBgHeight);
    ctx.lineTo(scoreBgX + borderRadius, scoreBgY + scoreBgHeight);
    ctx.quadraticCurveTo(scoreBgX, scoreBgY + scoreBgHeight, scoreBgX, scoreBgY + scoreBgHeight - borderRadius);
    ctx.lineTo(scoreBgX, scoreBgY + borderRadius);
    ctx.quadraticCurveTo(scoreBgX, scoreBgY, scoreBgX + borderRadius, scoreBgY);
    ctx.closePath();
    ctx.fillStyle = '#F8F9FA';
    ctx.strokeStyle = '#E9ECEF';
    ctx.lineWidth = 1;
    ctx.fill();
    ctx.stroke();
    
    // 绘制分数文字 - 使用比例设置字体大小
    ctx.fillStyle = '#E74C3C';
    ctx.font = `${16 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText(`历史最高分: ${highScore}`, width / 2, scoreBgY + scoreBgHeight / 2 + 7 * scaleFactor);
    
    // 绘制按钮区域
    const btnWidth = width * 0.7;
    const btnHeight = 45 * scaleFactor;
    const btnX = (width - btnWidth) / 2;
    let btnY = logoY + logoSize + 120 * scaleFactor;
    
    // 开始游戏按钮 - 使用比例设置圆角
    ctx.beginPath();
    const btnBorderRadius = 25 * scaleFactor;
    ctx.moveTo(btnX + btnBorderRadius, btnY);
    ctx.lineTo(btnX + btnWidth - btnBorderRadius, btnY);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY, btnX + btnWidth, btnY + btnBorderRadius);
    ctx.lineTo(btnX + btnWidth, btnY + btnHeight - btnBorderRadius);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY + btnHeight, btnX + btnWidth - btnBorderRadius, btnY + btnHeight);
    ctx.lineTo(btnX + btnBorderRadius, btnY + btnHeight);
    ctx.quadraticCurveTo(btnX, btnY + btnHeight, btnX, btnY + btnHeight - btnBorderRadius);
    ctx.lineTo(btnX, btnY + btnBorderRadius);
    ctx.quadraticCurveTo(btnX, btnY, btnX + btnBorderRadius, btnY);
    ctx.closePath();
    ctx.fillStyle = '#27AE60';
    ctx.fill();
    
    // 绘制按钮文字 - 使用比例设置字体大小
    ctx.fillStyle = 'white';
    ctx.font = `bold ${18 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('开始游戏', width / 2, btnY + btnHeight / 2 + 7 * scaleFactor);
    
    // 设置按钮
    btnY += btnHeight + 70 * scaleFactor;
    ctx.beginPath();
    ctx.moveTo(btnX + btnBorderRadius, btnY);
    ctx.lineTo(btnX + btnWidth - btnBorderRadius, btnY);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY, btnX + btnWidth, btnY + btnBorderRadius);
    ctx.lineTo(btnX + btnWidth, btnY + btnHeight - btnBorderRadius);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY + btnHeight, btnX + btnWidth - btnBorderRadius, btnY + btnHeight);
    ctx.lineTo(btnX + btnBorderRadius, btnY + btnHeight);
    ctx.quadraticCurveTo(btnX, btnY + btnHeight, btnX, btnY + btnHeight - btnBorderRadius);
    ctx.lineTo(btnX, btnY + btnBorderRadius);
    ctx.quadraticCurveTo(btnX, btnY, btnX + btnBorderRadius, btnY);
    ctx.closePath();
    ctx.fillStyle = '#9B59B6';
    ctx.fill();
    
    ctx.fillStyle = 'white';
    ctx.font = `bold ${18 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('设置', width / 2, btnY + btnHeight / 2 + 7 * scaleFactor);
    
    // 排行榜按钮
    btnY += btnHeight + 70 * scaleFactor;
    ctx.beginPath();
    ctx.moveTo(btnX + btnBorderRadius, btnY);
    ctx.lineTo(btnX + btnWidth - btnBorderRadius, btnY);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY, btnX + btnWidth, btnY + btnBorderRadius);
    ctx.lineTo(btnX + btnWidth, btnY + btnHeight - btnBorderRadius);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY + btnHeight, btnX + btnWidth - btnBorderRadius, btnY + btnHeight);
    ctx.lineTo(btnX + btnBorderRadius, btnY + btnHeight);
    ctx.quadraticCurveTo(btnX, btnY + btnHeight, btnX, btnY + btnHeight - btnBorderRadius);
    ctx.lineTo(btnX, btnY + btnBorderRadius);
    ctx.quadraticCurveTo(btnX, btnY, btnX + btnBorderRadius, btnY);
    ctx.closePath();
    ctx.fillStyle = '#E67E22';
    ctx.fill();
    
    ctx.fillStyle = 'white';
    ctx.font = `bold ${18 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('排行榜', width / 2, btnY + btnHeight / 2 + 7 * scaleFactor);
    
    // 退出按钮 - 使用比例设置
    btnY += btnHeight + 80 * scaleFactor;
    const exitBtnWidth = 140 * scaleFactor;
    const exitBtnHeight = 40 * scaleFactor;
    const exitBtnX = (width - exitBtnWidth) / 2;
    const exitBtnBorderRadius = 20 * scaleFactor;
    ctx.beginPath();
    ctx.moveTo(exitBtnX + exitBtnBorderRadius, btnY);
    ctx.lineTo(exitBtnX + exitBtnWidth - exitBtnBorderRadius, btnY);
    ctx.quadraticCurveTo(exitBtnX + exitBtnWidth, btnY, exitBtnX + exitBtnWidth, btnY + exitBtnBorderRadius);
    ctx.lineTo(exitBtnX + exitBtnWidth, btnY + exitBtnHeight - exitBtnBorderRadius);
    ctx.quadraticCurveTo(exitBtnX + exitBtnWidth, btnY + exitBtnHeight, exitBtnX + exitBtnWidth - exitBtnBorderRadius, btnY + exitBtnHeight);
    ctx.lineTo(exitBtnX + exitBtnBorderRadius, btnY + exitBtnHeight);
    ctx.quadraticCurveTo(exitBtnX, btnY + exitBtnHeight, exitBtnX, btnY + exitBtnHeight - exitBtnBorderRadius);
    ctx.lineTo(exitBtnX, btnY + exitBtnBorderRadius);
    ctx.quadraticCurveTo(exitBtnX, btnY, exitBtnX + exitBtnBorderRadius, btnY);
    ctx.closePath();
    ctx.fillStyle = '#E74C3C';
    ctx.fill();
    
    ctx.fillStyle = 'white';
    ctx.font = `bold ${16 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('退出', width / 2, btnY + exitBtnHeight / 2 + 7 * scaleFactor);
  },
  
  // 检查按钮点击
  checkButtonClick: function(touchX, touchY, width, height) {
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    
    const btnWidth = width * 0.7;
    const btnHeight = 45 * scaleFactor;
    const btnX = (width - btnWidth) / 2;
    let btnY = 120 * scaleFactor + 120 * scaleFactor + 120 * scaleFactor; // logoY + logoSize + 120
    
    // 检查开始游戏按钮
    if (touchX >= btnX && touchX <= btnX + btnWidth && 
        touchY >= btnY && touchY <= btnY + btnHeight) {
      return 'start';
    }
    
    // 检查设置按钮
    btnY += btnHeight + 70 * scaleFactor;
    if (touchX >= btnX && touchX <= btnX + btnWidth && 
        touchY >= btnY && touchY <= btnY + btnHeight) {
      return 'settings';
    }
    
    // 检查排行榜按钮
    btnY += btnHeight + 70 * scaleFactor;
    if (touchX >= btnX && touchX <= btnX + btnWidth && 
        touchY >= btnY && touchY <= btnY + btnHeight) {
      return 'ranking';
    }
    
    // 检查退出按钮
    btnY += btnHeight + 80 * scaleFactor;
    const exitBtnWidth = 140 * scaleFactor;
    const exitBtnHeight = 40 * scaleFactor;
    const exitBtnX = (width - exitBtnWidth) / 2;
    if (touchX >= exitBtnX && touchX <= exitBtnX + exitBtnWidth && 
        touchY >= btnY && touchY <= btnY + exitBtnHeight) {
      return 'exit';
    }
    
    // 检查侧边栏礼包图标点击
    if (this.checkSidebarGiftClick(touchX, touchY, width, height)) {
      return 'sidebarGift';
    }
    
    return null;
  },

  // 渲染侧边栏礼包图标 - 使用比例设置
  renderSidebarGift: function(ctx, width, height) {
    const scaleFactor = Math.min(width, height) / 600; // 基准尺寸为600
    const giftSize = 60 * scaleFactor;
    const giftX = width - giftSize - 20 * scaleFactor;
    const giftY = 20 * scaleFactor;
    
    // 绘制礼包图标背景（红色圆形）
    ctx.beginPath();
    ctx.arc(giftX + giftSize / 2, giftY + giftSize / 2, giftSize / 2, 0, 2 * Math.PI);
    ctx.fillStyle = '#E74C3C';
    ctx.fill();
    ctx.strokeStyle = '#C0392B';
    ctx.lineWidth = 2 * scaleFactor;
    ctx.stroke();
    
    // 绘制礼包文字 - 使用比例设置字体大小
    ctx.fillStyle = 'white';
    ctx.font = `bold ${14 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('限定', giftX + giftSize / 2, giftY + giftSize / 2 - 5 * scaleFactor);
    ctx.fillText('福利', giftX + giftSize / 2, giftY + giftSize / 2 + 12 * scaleFactor);
    
    // 绘制闪烁提示效果（可选）
    const currentTime = Date.now();
    const flashInterval = 1000; // 1秒闪烁一次
    const shouldFlash = (currentTime % flashInterval) < flashInterval / 2;
    
    if (shouldFlash) {
      ctx.beginPath();
      ctx.arc(giftX + giftSize / 2, giftY + giftSize / 2, giftSize / 2 + 5, 0, 2 * Math.PI);
      ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
      ctx.lineWidth = 2;
      ctx.stroke();
    }
  },
  
  // 检查侧边栏礼包图标点击 - 使用比例设置
  checkSidebarGiftClick: function(touchX, touchY, width, height) {
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    const giftSize = 60 * scaleFactor;
    const giftX = width - giftSize - 20 * scaleFactor;
    const giftY = 20 * scaleFactor;
    
    // 计算点击点到圆心的距离
    const dx = touchX - (giftX + giftSize / 2);
    const dy = touchY - (giftY + giftSize / 2);
    const distance = Math.sqrt(dx * dx + dy * dy);
    
    return distance <= giftSize / 2;
  }
};

module.exports = MainView;